<template>
  <n-config-provider
    :locale="i18n.locale.value === 'zh' ? zhCN : enUS"
    :date-locale="i18n.locale.value === 'zh' ? dateZhCN : dateEnUS"
    class="config"
    :theme="themeStore.currentTheme === Theme.Dark ? darkTheme : null"
  >
    <n-loading-bar-provider>
      <n-message-provider>
        <n-loading-bar-provider>
          <n-dialog-provider>
            <router-view></router-view>
          </n-dialog-provider>
        </n-loading-bar-provider>
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { createDiscreteApi, darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui'
import { useI18n } from 'vue-i18n'

import { useLanguageStore } from '@/stores/language'
import { useTabStore } from '@/stores/tab'
import { Theme, useThemeStore } from '@/stores/theme'

import './styles/theme/dark.css'
import './styles/theme/light.css'

const tabStore = useTabStore()
const themeStore = useThemeStore()
const languageStore = useLanguageStore()
const i18n = useI18n()

const { message } = createDiscreteApi(['message'])
const { loadingBar } = createDiscreteApi(['loadingBar'])

window.$message = message
window.$loadingBar = loadingBar

onMounted(() => {
  themeStore.init()
  languageStore.init()
  tabStore.init()
})

// 刷新的时候再存进local里
window.addEventListener('beforeunload', () => {
  tabStore.storage()
})
</script>

<style lang="less">
html,
body,
#app,
.config {
  height: 100%;
}
</style>
